<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>动态伪类</title>
    <style type="text/css">
      input:hover {
        border: 1px solid red;
      } 
      input[type="text"]:focus {
        background-color: orange;
      }
      input[type="password"]:focus {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <form action="#">
      用户名<input type="text" /> <br />
      密码<input type="password" />
    </form>
  </body>
</html>
